<script setup lang="ts">
defineProps<{
  options: {
    value: number | string
    label: string
  }[]
  modelValue?: string | number
}>()
const emits = defineEmits<{
  (e: 'update:modelValue', active: number | string): void
}>()
</script>

<template>
  <div class="radio-btn-page">
    <a
      href="javascript:;"
      :class="['btn', { active: item.value === modelValue }]"
      v-for="(item, index) in options"
      :key="index"
      @click="emits('update:modelValue', item.value)"
      >{{ item.label }}
    </a>
  </div>
</template>

<style lang="scss" scoped>
.radio-btn-page {
  .btn {
    display: inline-block;
    // width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: var(--cp-bg);
    padding: 0 14px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    border: 1px solid var(--cp-bg);
    transition: all 0.3s;
    &.active {
      border-color: var(--cp-primary);
      background-color: var(--cp-plain);
    }
  }
}
</style>
